<template>
    <div class="vote app_content">
        <div class="warp_body">
            <!-- 中间 -->
            <div class="carousel_box">
                <carousel-card></carousel-card>
            </div>
            <div class="tabCon mescroll mescroll-bar">
                <!-- 主活动 -->
                <section class="box">
                    <div class="topheader region">
                        <div class="biaoti_ranking">
                            <van-notice-bar color="#fff" background="none" scrollable :text="result.activity.simpleDescribe" />
                        </div>
                        <div class="vote_info">
                            <div>
                                <span>{{ result.activity.projectNum }}</span>
                                <div>新农人</div>
                            </div>
                            <div>
                                <span>{{ result.activity.totalVoteNum }}</span>
                                <div>总票数</div>
                            </div>
                            <div>
                                <span>{{ result.activity.totalViewNum }}</span>
                                <div>浏览量</div>
                            </div>
                        </div>
                        <p
                            class="titme_box flex_y_center"
                            style="color: rgb(52, 52, 52);"
                            v-if="endTime > 0"
                        >
                            <i
                                class="Ticonfont iconH5_shouye_huodongxinxi_shijian"
                                style="color: rgb(0, 0, 0);"
                            ></i
                            >结束倒计时
                            <van-count-down :time="endTime" format="DD 天 HH 时 mm 分 ss 秒" />
                        </p>
                        <p v-else class="titme_box flex_y_center" style="color: rgb(52, 52, 52)">
                            活动结束
                        </p>
                        <div class="icon_rb"></div>
                    </div>
                </section>

                <!-- 介绍 -->
                <section class="box">
                    <div class="outline_box">
                        <div class="top_right"></div>
                        <div class="bottom_left"></div>
                        <div class="introducebox region">
<!--                            <div class="time flex_row">-->
<!--                                <i-->
<!--                                    class="Ticonfont iconshijian1 flex_grow_0"-->
<!--                                    style="color: rgb(0, 0, 0);"-->
<!--                                ></i>-->
<!--                                <span class="flex_grow_0">投票开始:</span>-->
<!--                                <span class="flex_grow_1">{{ result.activity.beginTime }}</span>-->
<!--                            </div>-->
                            <div class="time flex_row">
                                <i
                                    class="Ticonfont iconshijian1 flex_grow_0"
                                    style="color: rgb(0, 0, 0);"
                                ></i>
                                <span class="flex_grow_0">投票结束:</span>
                                <span class="flex_grow_1">{{ result.activity.endTime }}</span>
                            </div>
                            <div class="time flex_row">
                                <i
                                    class="Ticonfont iconjinggao flex_grow_0"
                                    style="color: rgb(0, 0, 0);"
                                ></i>
                                <span class="flex_grow_0">投票规则:</span>
                                <span class="flex_grow_1">{{ result.activity.rule }}</span>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="box">
                    <div class="outline_box">
                        <div class="tit">
                            活动说明
                        </div>
                        <div class="shuoming_con" style="background: rgb(255, 255, 255);">
                            {{ result.activity.description }}
                        </div>
                    </div>
                </section>
                <!-- <section class="box">
                    <div class="outline_box">
                        <div class="tit">
                            投票规则
                        </div>
                        <div class="shuoming_con" style="background: rgb(255, 255, 255);">
                            一个微信账号只能投一次票，一次投票至少选择5人才进行投票，最多选择不得超过10人
                        </div>
                    </div>
                </section> -->
                <section class="box">
                    <div class="outline_box">
                        <div class="tit">
                            投票声明
                        </div>
                        <div class="shuoming_con shuoming_cons" style="background: rgb(255, 255, 255);">
                            严禁任何作弊行为。
                        </div>
                    </div>
                </section>

                <div class="names">本活动最终解释权归常州市农业农村局所有。</div>

            </div>

            <!-- 底部 -->
            <div class="footer_body">
                <footer-nav></footer-nav>
            </div>
        </div>
    </div>
</template>

<script setup>
import dayjs from "dayjs";

const { useHome } = $globalStore;
// 请求结果
const result = reactive({
    activity: {},
    list: [],
});

// 获取
const getActivity = async () => {
    const res = await useHome.getActivity();
    if(res.success) {
        result.activity = res.body;
    }
}
getActivity();

const endTime = computed(function () {
    const { endTime } = result.activity;
    if (!endTime) {
        return null;
    }
    const end = dayjs(endTime).valueOf();
    return end - dayjs().valueOf();
});
</script>

<style lang="less" scoped>
.warp_body {
    background: -webkit-linear-gradient(left, rgb(4, 187, 224), rgb(33, 236, 179));
}
.vote {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #f4f4f4;

    .warp_body {
        .carousel_box {
            // height: 150px;
            width: 100%;
            padding-bottom: 10px;
        }
    }

    .boutique_box {
        .boutique_body {
            padding: 0px 0px 10px 0px;
        }
    }

    //.recommend_box {
    //    .recommend_body {
    //        width: 100%;
    //    }
    //}
}
.shuoming_con {
    padding: 0.24rem;
    font-size: 0.3rem;
    border-radius: 0 0 0.16rem 0.16rem;
    box-shadow: 0 0.04rem 0 0 rgba(0, 0, 0, 0.25);
    // margin-bottom: 1rem;
}
.shuoming_con.shuoming_cons{
    margin-bottom: 0.5rem;
}

.names{
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 0.5rem;
}
.biaoti_ranking .van-notice-bar {
    font-size: 0.36rem;
}
</style>
